{layout name="layout1" /}


<div class="layui-col-md12">
    <div class="layui-fluid">


        <div class="layui-form" lay-filter="">
            <div class="layui-card" >
                <div class="layui-card-body">
                    <div class="layui-input-inline">
                        <div class="layui-card-header" >概况</div>
                    </div>


                    <div class="layui-input-inline" style="left: 50px">
                        <div class="layui-input-inline">
                            <select name="city" lay-verify="required" lay-filter="days">
                                <option value="0" >今日实时</option>
                                <option value="1" >近7天</option>
                                <option value="2" >近30天</option>
                            </select>
                        </div>

                    </div>
                    <div class="layui-input-inline " id="days" style="white-space: nowrap;left:70px">
                        {$res.start} 至 {$res.end}
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            店铺浏览量
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="shop_click">{$res.shop_click}</p>

                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            店铺收藏量
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="shop_collect">{$res.shop_collect}</p>

                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3" >
                    <div class="layui-card" >
                        <div class="layui-card-header" >
                            商品浏览量
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" >
                            <p class="layuiadmin-big-font" id="goods_click">{$res.goods_click}</p>

                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            商品收藏量
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="goods_collect">{$res.goods_collect}</p>

                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-card" style="width: 100%;height: 150vh;margin-top:20px">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-input-inline layui-card-header" style="">访问趋势分析</div>
                        <div class="layui-input-inline" style="right: 100px">
                            <select  lay-verify="required"  lay-filter="goods">
                                <option value="0">近7天</option>
                                <option value="1">近30天</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" id="goods_days" style="white-space: nowrap;top:8px;right:80px">
                            {$res.start_seven} 至 {$res.end_seven}
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div id="EchartZhe" style="width: 80%;height: 80vh;"> </div>
                    </div>
                </div>
            </div>


        </div>



    </div>
</div>


<script>


    layui.config({
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','like','echarts','form'], function(){
        var $ = layui.$
            ,form = layui.form
            ,like = layui.like
            ,echarts = layui.echarts;

        like.ajax({
            url: '{:url("statistics/default")}',
            data: {},
            type: "post",
            success: function (res) {
                console.log(res);
                var option = {
                    //title: {
                    //   text: '堆叠区域图'
                    // },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985',
                            }
                        }
                    },
                    legend: {
                        data: ['店铺浏览量', '店铺收藏量','商品浏览量', '商品收藏量']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            name:'(天)',
                            type: 'category',
                            boundaryGap: false,
                            data: ['1', '2', '3', '4', '5', '6', '7']
                        }
                    ],
                    yAxis: [
                        {
                            name:'(个)',
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '店铺浏览量',
                            type: 'line',

                            areaStyle: {},
                            data: res.data.echarts_shop_click,
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        color: 'rgba(255,182,193,0.5)'
                                    },

                                },
                            }
                        },
                        {
                            name: '店铺收藏量',
                            type: 'line',

                            areaStyle: {},
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        color: 'rgba(225,255,255,0.5)'
                                    },

                                },
                            },
                            data: res.data.echarts_shop_collect
                        },
                        {
                            name: '商品浏览量',
                            type: 'line',

                            areaStyle: {},
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        color: 'rgba(218,112,214,0.5)'
                                    },

                                },
                            },
                            data: res.data.echarts_goods_click
                        },
                        {
                            name: '商品收藏量',
                            type: 'line',

                            areaStyle: {},
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        color: 'rgba(127,255,170,0.5)'
                                    },

                                },
                            },
                            data: res.data.echarts_goods_collect
                        }

                    ]
                }
                //准备好dom元素 创建Echart实例
                var chartZhe = echarts.init(document.getElementById('EchartZhe'));
                chartZhe.setOption(option, true);
                window.addEventListener('resize', function () {
                    chartZhe.resize()
                });
            }
        });

        form.on('select(days)', function(data){

            console.log(data.value); //得到被选中的值
            like.ajax({
                url:'{:url("statistics/visit")}',
                data:{id:data.value},
                type:"post",
                success:function(res)
                {
                    console.log(res.data);
                    $('#days').html(res.data.start+  ' 至 ' +res.data.end );
                    $('#goods_click').html(res.data.goods_click);
                    $('#goods_collect').html(res.data.goods_collect);
                    $('#shop_click').html(res.data.shop_click);
                    $('#shop_collect').html(res.data.shop_collect);


                }
            });
        });

        form.on('select(goods)', function(data){
            like.ajax({
                url: '{:url("statistics/visit")}',
                data: {goods:data.value},
                type: "post",
                success: function (res) {
                    // console.log(Array(res.data.days).fill(1).map((v,k)=>k+1));
                    $('#goods_days').html(res.data.start+  ' 至 ' +res.data.end );
                    var option = {
                        //title: {
                        //   text: '堆叠区域图'
                        // },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985',
                                }
                            }
                        },
                        legend: {
                            data: ['店铺浏览量', '店铺收藏量','商品浏览量', '商品收藏量']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                name:'(天)',
                                type: 'category',
                                boundaryGap: false,
                                data: Array(res.data.days).fill(1).map((v,k)=>k+1) //填充数组
                            }
                        ],
                        yAxis: [
                            {
                                name:'(个)',
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '店铺浏览量',
                                type: 'line',

                                areaStyle: {},
                                data: res.data.echarts_shop_click,
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            color: 'rgba(255,182,193,0.5)'
                                        },

                                    },
                                }
                            },
                            {
                                name: '店铺收藏量',
                                type: 'line',

                                areaStyle: {},
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            color: 'rgba(225,255,255,0.5)'
                                        },

                                    },
                                },
                                data: res.data.echarts_shop_collect
                            },
                            {
                                name: '商品浏览量',
                                type: 'line',

                                areaStyle: {},
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            color: 'rgba(218,112,214,0.5)'
                                        },

                                    },
                                },
                                data: res.data.echarts_goods_click
                            },
                            {
                                name: '商品收藏量',
                                type: 'line',

                                areaStyle: {},
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            color: 'rgba(127,255,170,0.5)'
                                        },

                                    },
                                },
                                data: res.data.echarts_goods_collect
                            }

                        ]
                    }
                    //准备好dom元素 创建Echart实例
                    var chartZhe = echarts.init(document.getElementById('EchartZhe'));
                    chartZhe.setOption(option, true);
                    window.addEventListener('resize', function () {
                        chartZhe.resize()
                    });
                }
            });
        })



    });

</script>